import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import CaseStore from '../../stores/CaseStore';
import { Case } from '../../entity/CaseEntiy';
import { RouterStore } from 'mobx-react-router';
import { NavBar, Icon } from 'antd-mobile';
import { Select } from 'antd';

const Option = Select.Option;

import './UnsatisfyList.scss';
import { SelectValue } from 'antd/lib/select';

export interface CaseListProps {
    caseStore: CaseStore;
    routingStore: RouterStore;
}

const selectOptions = [
    '诉求人主观原因',
    '与内部规定、约定等不符',
    '已有计划尚未执行',
    '与已有法律等矛盾',
    '未及时办理',
    '诉求人对公示或规划内容不满',
    '已立案立项',
    '需资金安排，暂无法办理',
    '全部'
];

@inject('caseStore', 'routingStore')
@observer
export default class UnsatisfyList extends Component<CaseListProps> {
    componentWillMount() {
        this.props.caseStore.getUnsatisfyList(8);
    }
    handleSelect = (v: SelectValue) => {
        let key = Number(v);
        this.props.caseStore.getUnsatisfyList(key);
    }
    render(): JSX.Element {
        const { caseStore, routingStore } = this.props;
        return (
            <div className="list-container">
                <NavBar
                    mode="light"
                    icon={<Icon type="left" />}
                    leftContent={<span style={{ fontFamily: 'Arial, Helvetica, sans-serif' }}>返回</span>}
                    onLeftClick={() => { routingStore.goBack(); }}
                    className="list-nav"
                >
                    <span className="list-title"> {caseStore.CaseListCategory} </span>
                </NavBar>
                <div className="preview-select">
                    <div className="select-set">
                        <span className="pre-title">类别选择：</span>
                        <Select
                            defaultValue="全部"
                            style={{ width: 200 }}
                            size="small"
                            onSelect={(v: SelectValue) => this.handleSelect(v)}
                        >
                            {
                                selectOptions.map((v: string, i: number) => {
                                    return (
                                        <Option
                                            key={i}
                                            value={i}
                                        >
                                            {v}
                                        </Option>
                                    );
                                })
                            }
                        </Select>
                    </div>

                    <div className="preview">
                        <span>工单数量：</span>
                        <span
                            style={{ color: '#D9255E', fontFamily: 'Arial, Helvetica, sans-serif' }}
                        >
                            {caseStore.UnsatisfyList.length}
                        </span>
                    </div>

                </div>

                <div className="item-container">
                    {
                        caseStore.UnsatisfyList.map((v: Case, i: number): JSX.Element => (
                            <div
                                className="list-item"
                                key={i}
                                onClick={
                                    () => {
                                        if (caseStore.CaseListCategory === '不满意工单') {
                                            routingStore.push('/unsatisfy_details');
                                        }
                                    }
                                }
                            >
                                <p> {i + 1 + '、' + v.content}</p>
                                <div>
                                    <span>{v.uuid}</span>
                                    <span>{v.date}</span>
                                </div>

                            </div>
                        ))
                    }
                </div>
            </div>
        );
    }
}